<template>
  <div>
    <jxf-titletip :title="title" :hasRefresh="false"></jxf-titletip>
    <el-card class="mt20">
      <el-steps class="el-step-style1" :active="active" align-center>
        <el-step title="选择供应商"></el-step>
        <el-step title="选择商品分类"></el-step>
        <el-step title="填写商品信息"></el-step>
      </el-steps>

      <transition name="el-zoom-in-top">
        <div v-show="active === 1">
          <h4 class="list-title">选择供应商</h4>
          <ChooseSupplier @nextStep1="nextStep1" :title="'下一步，商品分类信息'"></ChooseSupplier>
        </div>
      </transition>
      <transition name="el-zoom-in-top">
        <div v-show="active === 2">
          <h4 class="list-title">选择商品分类</h4>
          <ChooseClassify @nextStep2="nextStep2" :dataInfo="dataInfo" @goBackStep1="goBackStep1"></ChooseClassify>
        </div>
      </transition>
      <transition name="el-zoom-in-top">
        <div v-show="active === 3">
          <AddProductInfoForm :commitInfo="info" :classifyName="classifyName" @goBackStep2="goBackStep2"></AddProductInfoForm>
        </div>
      </transition>
    </el-card>
  </div>
</template>

<script>
  import ChooseSupplier from './components/ChooseSupplier'
  import ChooseClassify from './components/ChooseClassify'
  import AddProductInfoForm from './components/AddProductInfoForm'
  export default {
    name: "AddProduct",
    components:{ChooseSupplier,ChooseClassify,AddProductInfoForm},
    data() {
      return {
        title: "新增（选择供应商）",
        active: 1,
        info:{
          supplyId:null
        },
        dataInfo: {},
        classifyName:{
          firstClassify: "",
          secClassify: "",
          thiClassify: ""
        }
      }
    },
    methods: {
      nextStep1(id){
        this.info.supplyId = id
        this.dataInfo = this.info;
        this.title = "新增（选择商品分类）"
        this.active = 2
      },
      nextStep2(classifyInfo){
        this.info.firstClassifyId  = classifyInfo.id.firstClassify
        this.info.secClassifyId  = classifyInfo.id.secClassify
        this.info.thiClassifyId  = classifyInfo.id.thiClassify
        this.classifyName = classifyInfo.name
        this.title = "新增（填写商品信息）"
        this.active = 3
      },
      goBackStep1() {
        this.title = "新增（选择供应商）"
        this.active = 1
      },
      goBackStep2(){
        this.title = "新增（选择商品分类）"
        this.active = 2
      }
    },
    created() {
    }
  }
</script>

<style lang="scss">

</style>
